<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GPS管线巡检体统</title>

<link href="__PUBLIC__/mapsDemo/mapsDemo.css" rel="stylesheet"
	type="text/css" />
<script src="__PUBLIC__/mapsDemo/main.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script src="__PUBLIC__/mapsDemo/prototype.lite.js"
	type="text/javascript"></script>
<script src="__PUBLIC__/mapsDemo/moo.fx.js" type="text/javascript"></script>
<script src="__PUBLIC__/mapsDemo/moo.fx.pack.js" type="text/javascript"></script>

</head>

<body>
	<div id="container">
		<div id="header">管线巡检系统</div>
		<div id="menu">
			<div class="table">

				<ul class="select">
					<li><a><b onclick="loadLines()">巡检线路</b></a>
						<div class="select_sub">
							<ul class="sub" id="lines">
							</ul>
						</div></li>
				</ul>

				<ul class="select">
					<li><a href="#"><b>菜单选项2</b></a>
						<div class="select_sub">
							<ul class="sub" id="test">
								<li><a href="#">21</a></li>
								<li><a href="#">22</a></li>
								<li><a href="#">23</a></li>
								<li><a href="#">24</a></li>
								<li><a href="#">25</a></li>
							</ul>
						</div></li>
				</ul>


				<ul class="select">
					<li><a href="#"><b>菜单选项3</b></a>
						<div class="select_sub">
							<ul class="sub">
								<li><a href="#">31</a></li>
								<li><a href="#">32</a></li>
								<li><a href="#">33</a></li>
								<li><a href="#">34</a></li>
								<li><a href="#">35</a></li>
							</ul>
						</div></li>
				</ul>


				<ul class="select">
					<li><a href="#"><b>菜单选项4</b></a>
						<div class="select_sub">
							<ul class="sub">
								<li><a href="#">41</a></li>
								<li><a href="#">42</a></li>
								<li><a href="#">43</a></li>
								<li><a href="#">44</a></li>
								<li><a href="#">45</a></li>
							</ul>
						</div></li>
				</ul>

			</div>
		</div>

		<div id="mainContent">


			<div id="content"></div>
			<!-- 	
    <div id="sidebar">
    	<div class = "sideimg">
    		<img  src= "__PUBLIC__/mapsDemo/img/hid.png" name = "pichide"  alt= "点击隐藏" title="点击隐藏" onmouseover="hideover();" onmouseout= "hideout();" onclick="hideclick();"/>
    	</div>
		
		<div id = "sidemenu">
	    	<H1 class="title"><A href="javascript:void(0)">1</a></H1>
	    	
			<div class="content1">
				<img src="__PUBLIC__/mapsDemo/img/menu_topline.gif" height="5" />
				<div id = "con1">
					<p>111111111111111</p>
					
				</div>
				
			</div>
			<H1 class="title"><A href="javascript:void(0)">2</a></H1>
			<div class="content1">
				<img src="__PUBLIC__/mapsDemo/img/menu_topline.gif" height="5" />
				<div id = "con2">
					<p>22222</p>
				</div>
			</div>
			<H1 class="title"><A href="javascript:void(0)">3</a></H1>
			<div class="content1">
			  <img src="__PUBLIC__/mapsDemo/img/menu_topline.gif" height="5" />
				<div id = "con3">
					<p>3333</p>
				</div>
			</div>
			<H1 class="title"><a href="javascript:void(0)">4</a></H1>
			<div class="content1">
				<img src="__PUBLIC__/mapsDemo/img/menu_topline.gif" height="5" />
				<div id = "con4">
					<p>444</p>
				</div>
			</div>
    	</div>
    </div>
-->
		</div>

	</div>
</body>
</html>

<script type="text/javascript">
/**
	//与slidebar有关
		var contents = document.getElementsByClassName('content1');
		var toggles = document.getElementsByClassName('title');
		
		var myAccordion = new fx.Accordion(
			toggles, contents, {opacity: true, duration: 400}
		);
		myAccordion.showThisHideOpen(contents[0]);
	
	var windowH =document.documentElement.clientHeight;//窗口可视区域的高度
	var windowB = document.body.clientHeight;
	var headerH = document.getElementById("header").offsetHeight;//header的高度
	var menuH = document.getElementById("menu").offsetHeight;//menu的高度
	var mapH = document.getElementById("content").style.height = windowH - headerH - menuH - 10 + "px";
	var sideH = document.getElementById("con1").style.height = document.getElementById("con2").style.height = document.getElementById("con3").style.height =document.getElementById("con4").style.height = windowH - headerH - menuH - 10 - 193-2 + "px";  
	
	
	flag = 0 ;
	images = new Array;
	images[1] = new Image();
	images[1].src = "__PUBLIC__/mapsDemo/img/hid.png";
	images[2] = new Image();
	images[2].src = "__PUBLIC__/mapsDemo/img/hid1.png";
	images[3] = new Image();
	images[3].src = "__PUBLIC__/mapsDemo/img/display.png";
	images[4] = new Image();
	images[4].src = "__PUBLIC__/mapsDemo/img/display1.png"; 
	function hideclick(){
		
		if(flag == 0){
			document.pichide.src = images[3].src;
			document.pichide.title = "点击展开";
			//alert("1");
			document.getElementById("sidemenu").style.display = "none";
			//alert("2");
			flag = 1;			
		}
		else if(flag == 1){
			document.pichide.src = images[1].src;
			document.getElementById("sidemenu").style.display = "";
			document.pichide.title = "点击隐藏";
			flag = 0;			
		}
	} 
	  
	function hideover(){
		if(flag == 0 ){
			document.pichide.src = images[2].src;
		}
		else if(flag == 1){
			document.pichide.src = images[4].src;
		}
	}
	function hideout(){
		if(flag == 0 ){
			document.pichide.src = images[1].src;
		}
		else if(flag == 1){
			document.pichide.src = images[3].src;
		}
	}
*/
	
// 	读取巡检线路
function loadLines(){
//	alert("__URL__");
	var xmlHttp = false;
	if(window.ActiveXObject){
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	} 
	else if(window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	}	
	var url = "__URL__/loadLines";
	if(!xmlHttp){
		alert("XMLHttpRequest is not Create!");
	}
	xmlHttp.open("GET",url,true);
	xmlHttp.onreadystatechange = function(){
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
			var data = xmlHttp.responseText;
			var obj = JSON.parse(data);
			var lines = new Array();
			lines = obj.lines;
			var innerhtml="";
			for(i=0;i<lines.length;i++){
				innerhtml = innerhtml+"<li onclick='showLines(this.id)' id="+lines[i]['line_id']+"><a"+">"+lines[i]['name']+"</a></li>";
			}
			document.getElementById("lines").innerHTML  = innerhtml;
		}
	}
	xmlHttp.send(null);
}

// 显示线路
	function showLines(id){
		// alert(id);
		var xmlHttp =false;
		if(window.ActiveXObject){
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}	
		} 
		else if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}	
		var url = "__URL__/loadNodes?line_id="+id;
		if(!xmlHttp){
			alert("XMLHttpRequest is not Create!");
		}
		xmlHttp.open("GET",url,true);
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
				var data = xmlHttp.responseText;
				var obj = JSON.parse(data);
				var nodes = new Array();
				nodes = obj.nodes;
				length = nodes.length;
				var points = new Array();
				var marker = new Array();
				var infoWindow = new Array();
				map.clearOverlays();
				for (i = 0; i < length; i++) {
					points[i] = new BMap.Point(nodes[i].longitude,nodes[i].latitude);
					marker[i] = new BMap.Marker(points[i]);  // 创建标注
					infoWindow[i] = new BMap.InfoWindow(nodes[i].name);
					map.addOverlay(marker[i]);  // 将标注添加到地图中
					addMarkerInfowindow(marker[i],infoWindow[i]);
				}
				var polyline = new BMap.Polyline(points, {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5});
				map.addOverlay(polyline);
			}	
		}
	xmlHttp.send(null);
	}
	
//	为marker添加信息弹窗
	function addMarkerInfowindow(marker,infowindow){
		marker.addEventListener("click",function(){this.openInfoWindow(infowindow)});
	}

	
	
	//与地图有关	
	var map = new BMap.Map("content",{mapType:BMAP_HYBRID_MAP});
	map.centerAndZoom(new BMap.Point(114.2726486277,30.447122443619), 18);

	map.addControl(new BMap.MapTypeControl()); 
	map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.ScaleControl());                 

	map.setCurrentCity("武汉");         
	map.enableScrollWheelZoom();

	var polyline = new BMap.Polyline([
		new BMap.Point(114.26908881899,30.446357364436),
		new BMap.Point(114.27052838908,30.446074226591),
  		new BMap.Point(114.27042025325,30.44539716527),
  		new BMap.Point(114.27223169532,30.445120014538),
  		new BMap.Point(114.2726486277, 30.447122443619),
		new BMap.Point(114.27394939224,30.447878432885),
		new BMap.Point(114.27648855711,30.447560237938),
		new BMap.Point(114.27684354697,30.44936269666),

	], {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5});
	</script>